<template>
	<view>
		<view v-show="!loadingone" style="background-color: #fff;">
			<navbar name="计划详情"></navbar>
			<view class="planArrView">
				<view class="weui-flex">
					<view class="weui-flex__item">
						<view class="placeholder">
							{{result.taskName}}
						</view>
					</view>
					<view>
						<view class="placeholder">
							<view class="weui-flex">
								<view class="weui-flex__item">
									<view class="placeholder ranone">
									</view>
								</view>
								<view>
									<view class="placeholder rantwo">
									</view>
								</view>
								<view>
									<view class="placeholder rantwo">
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="weui-flex imgagecen">
				<view class="lazy-load">
					<u-lazy-load border-radius="36rpx 0 0 36rpx" height="260" img-mode="aspectFill"
						:image="result.taskImage">
					</u-lazy-load>
				</view>
				<view class="txtRi">
					<view class="txtnum">
						{{result.taskPeriod}}
					</view>
					计划天数
				</view>
			</view>
			<view class="contentText">
				{{result.taskDesc}}
			</view>
			<view class="textView">
				计划特色
			</view>
			<view class="contentText">
				{{result.taskFeature}}
			</view>
			<view class="textView" style="margin-top:10upx;">
				适宜人群
			</view>
			<view class="contentText">
				{{result.taskPerson}}
			</view>

			<!--天 -->
			<view>
				<block v-for="(item,idx) in result.taskDayList" :key="idx">
					<view class="weui-flex boxday">
						<view class="lefttitle">
							{{item.stepDay}}
						</view>
						<view class="rtext" :class="'background'+idx" :style="'background:'+item.bg">
							{{item.title}}
						</view>
					</view>
				</block>
			</view>
			<view style="height: 300upx;"></view>
			<button type="default" class="BeganToPlan" @tap="JoinThePlan()" :disabled="disabled">开始计划</button>
			<!-- end -->
			<u-popup v-model="addShow" mode="center" width="540rpx" height="286rpx" border-radius="14">
				<view style="background-color: #fff;">
					<view class="addPopuptext">
						<text>
							确定加入计划吗？
							新计划将会替代旧计划
						</text>
					</view>
					<u-line />
					<view class="weui-flex">
						<view class="cancel-text" @tap.stop="cancelClick()">
							取消
						</view>
						<view class="affirm-text" @tap.stop="affirmClick()">
							确定加入
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>

</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"
import uSearch from "@/uview-ui/components/u-search/u-search.vue"
import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"
import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"

	export default {
		components: {
			uPopup,
			uLine,
			uLazyLoad,
			uLoading
		},
		data() {
			return {
				disabled:false,//按钮禁用
				loadingone: true,
				result: '', //后端返回数据
				addShow: false,
				show: true,

			}
		},
		onLoad(e) {
			this.getTaskDetailById(e.taskId)
		},
		methods: {
			JoinThePlan() {
				let _this = this;
				_this.disabled = true;
				this.$api.get(global.apiUrls.getIsUserTask+'?userId='+uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (!res.data.success) {//已添加出提示
							_this.addShow = true;
						}else{
							_this.userTask(_this.result.taskId) //添加计划
						}
						_this.disabled = false;
					})
			},
			getTaskDetailById(taskId) {
				let _this = this;
				_this.loadingone = true;
				this.$api.get(global.apiUrls.getTaskDetailById + taskId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.result = result; //当前计划
							_this.loadingone = false;
						}
					})
			},
			cancelClick() {
				this.addShow = false
			},
			affirmClick() {
				this.addShow = false
				this.userTask(this.result.taskId) //添加计划
			},
			userTask(taskId) {
				let fdata = {
					taskId: taskId,
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				}
				uni.showLoading({
				    title: '添加计划中'
				});
				this.$api.post(global.apiUrls.userTask, fdata)
					.then(res => {
						uni.hideLoading();
						if (res.data.code == 1000) {
							uni.showToast({
								title: '添加计划成功',
								duration: 2000
							});
							setTimeout(() => {
								uni.reLaunch({
									url:'/pages/tab/home'
								})
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	@import "../basescss/basescss.scss";

	.background0,
	.background4 {
		background: #DAF6F4;
	}

	.background1,
	.background5 {
		background: #FEE1DD;
	}

	.background2,
	.background6 {
		background: #EAE2FE;
	}

	.background3,
	.background7 {
		background: #FDF1DB;
	}

	.textView {
		height: 82upx;
		line-height: 82upx;
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
		padding: 0 53upx;
	}

	.contentText {
		font-size: 30upx;
		font-weight: 400;
		color: #333333;
		line-height: 42upx;
		padding: 0 53upx;
	}

	.boxday {
		width: 650upx;
		margin: 60upx auto 0;
	}

	.lefttitle {
		width: 120upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
	}

	.rtext {
		width: 524upx;
		font-size: 24upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 10upx;
		padding-left: 16upx;
		box-sizing: border-box;
	}

	.BeganToPlan {
		width: 655upx;
		height: 90upx;
		border-radius: 45upx;
		color: #fff;
		position: fixed;
		bottom: 40upx;
		left: 50%;
		transform: translateX(-50%);
		background: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png)no-repeat;
		background-size: 750upx 175upx;
	}

	.addPopuptext {
		padding: 47upx 0 39upx;
		text-align: center;
		font-size: 36upx;
		font-weight: 400;
		color: #000000;
		line-height: 50upx;
	}

	.cancel-text {
		width: 268upx;
		height: 99upx;
		border-right: 1px solid #DCDEE3;
		text-align: center;
		line-height: 99upx;
		font-size: 36upx;
		font-weight: 400;
		color: #999999;
	}

	.affirm-text {
		width: 270upx;
		height: 99upx;
		text-align: center;
		line-height: 99upx;
		font-size: 36upx;
		color: #2EA7E0;
	}
</style>
